 <template>
  <div>
    <div v-for="(item, index) in arr" class="di" :key="index">
      <span>食品{{ item.title }}</span>
      <span>价格{{ item.price }}</span>
      <button v-if="item.show" @click="jian(item)">-</button>
      <span>{{ item.num }}</span>
      <button @click="add(item)">+</button>
    </div>
    <hr />
    <div class="soop">
      <span>购物车</span>
      <span>总数{{ $store.getters.dl[0] }}</span>
      <span>价格{{ $store.getters.dl[1] }}</span>
      <p v-for="(i, index) in $store.state.Lt.mtarr" :key="index">
        <span>{{ i.title }}</span>
        <span>{{ i.price }}</span>
        <button @click="jian(i)">-</button>
        <span>{{ i.num }}</span>
        <button @click="add(i)">+</button>
      </p>
    </div>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      arr: [
        { title: "奶茶", price: "20", num: 0, show: false, id: 0 },
        { title: "菠萝", price: "30", num: 0, show: false, id: 1 },
        { title: "蛋糕", price: "50", num: 0, show: false, id: 2 },
      ],
      show: false,
    };
  },
  methods: {
    add(item) {
      var edg=/^foo{1,2}$/
      console.log(edg.test("foo"));
      item.show = true;
      this.$store.commit("add", item);
    },
    jian(item) {
      this.$store.commit("jian", item);
      if (item.num == 0) {
        item.show = false;
      }
    },
  },
  computed: {},
};
</script>
 <style lang='css'>
.di {
  margin-top: 10px;
}
.soop {
  margin-top: 50px;
}
span {
 user-select: none;
}
</style>